import React, { Component } from 'react';
import { connect } from 'react-redux';
import flowRight from 'lodash/flowRight';
import { withRouter } from 'react-router-dom';
import style from './login.module.scss';
import { Form, Input, Icon, Button } from 'antd';

const FormItem = Form.Item;
function mapStateToProps(state) {
    return {
        ifLogin: state.auth.ifLogin
    };
}

function Footer() {
    return (
        <footer className={style.login_footer}>
            <span>Copyright© 2017 All Rights Reserved. 杭州谐云科技有限公司 版权所有</span>
        </footer>
    )
}

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false
        }
    }
    // componentDidMount() {
    //     console.log(this.props);
    // }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.setState({ loading: true });
                console.log('Received values of form: ', values);
                let data = {
                    userName: values.userName,
                    password: values.password
                };
                this.props.history.push('/index');
            }
        });
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        // if (this.props.ifLogin) {
        //     return <Redirect to="/index" />
        // }
        return (
            <div className={style.login}>
                <div className={style.login_contain}>
                    <div className={style.login_warp}>
                        <Form onSubmit={this.handleSubmit} className="login-form">
                            <FormItem>
                                {getFieldDecorator('userName', {
                                    rules: [{ required: true, message: '请输入用户名!' }],
                                })(
                                    <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
                                )}
                            </FormItem>
                            <FormItem>
                                {getFieldDecorator('password', {
                                    rules: [{ required: true, message: '请输入用户密码!' }],
                                })(
                                    <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
                                )}
                            </FormItem>
                            <FormItem>
                                <Button type="primary" htmlType="submit" block loading={this.state.loading}>
                                    登 录
                                </Button>
                            </FormItem>
                        </Form>
                    </div>
                </div>
                <Footer/>
            </div>
        );
    }
}

const compose = flowRight(
    withRouter,
    connect(mapStateToProps),
    Form.create()
)
export default compose(Login);